<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <ui:composition template="templates/creatively-article.xhtml">

        <ui:param name="pageTitle" value="Terms of Use"/>
        <ui:param name="webSiteTitle" value="X Files"/>

        <ui:define name="submenu">
            <ul>
                <li><a href="#{request.contextPath}/faces/services.xhtml">Services</a></li>
                <li class="selected"><a href="#">Terms of Use</a></li>
                <li><a href="#{request.contextPath}/faces/testimonials.xhtml">Testimonials</a></li>
            </ul>
        </ui:define>

        <ui:define name="categories">
            <h3>Categories</h3>
            <ul class="categories">
                <li><a href="#">Category</a></li>
                <li class="selected"><a href="#">Category 1</a></li>
                <li><a href="#">Catogory 2</a></li>
                <li><a href="#">Category 3</a></li>
            </ul>	
        </ui:define>

        <ui:define name="content">
            <h2>Terms of Use</h2>
            
            <p><strong>Here is an example of long article.</strong></p>
            
            <p>Lorem ipsum <a href="#">dolor sit amet</a>, consectetur adipiscing elit. Aenean at vestibulum nunc. Sed augue magna, molestie at varius vitae, aliquam et purus. Quisque lacus enim, cursus a ornare non, ultricies quis nisl. Morbi eget velit dignissim ante sodales fringilla. Vestibulum molestie sagittis neque quis dignissim.</p>
            <p><strong>Integer congue, erat id lobortis rutrum, libero dolor cursus nibh, vel volutpat lectus sem vulputate nisi.</strong></p>
            <p>Donec enim ligula, malesuada et elementum non, euismod eu neque. Vivamus lorem elit, malesuada nec egestas eu, congue eget justo. Aliquam laoreet dictum tristique. Duis quam tortor, ultricies sit amet euismod sed, auctor quis mauris. Phasellus ac sollicitudin nisl.</p>
            <p class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>
            <p>Maecenas ac justo leo. Quisque auctor neque et tortor molestie at porta lorem faucibus. Sed eget nisi quis dolor posuere condimentum. Suspendisse sem justo, lacinia iaculis fermentum in, tempus vel magna. Morbi metus tortor, volutpat vitae posuere non, commodo nec lectus.</p>

            <div class="space"></div>
            <hr />

            <a href="#" class="button_grey_big">Big grey button</a><h:outputText value="&#160;" />
            <a href="#" class="button_green_big">Big green button</a><h:outputText value="&#160;" />
            <a href="#" class="button_grey">Grey button</a><h:outputText value="&#160;" />
            <a href="#" class="button_green">Green button</a><h:outputText value="&#160;" />
            <a href="#" class="read_more">Read more</a>

            <div class="space"></div>
            <hr />

            <h2>Headline &lt;h2&gt;</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>

            <h3>Headline &lt;h3&gt;</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>

            <h4>Headline &lt;h4&gt;</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>

            <h5>Headline &lt;h5&gt;</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>

            <h6>Headline &lt;h6&gt;</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>

            <div class="space"></div>
            <hr />

            <h2><img src="img/icons/applications-internet.png" alt="" /> Headline &lt;h2&gt;</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>

            <h3><img src="img/icons/applications-internet.png" alt="" /> Headline &lt;h3&gt;</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>

            <h4><img src="img/icons/applications-internet.png" alt="" /> Headline &lt;h4&gt;</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>

            <h5><img src="img/icons/applications-internet.png" alt="" /> Headline &lt;h5&gt;</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>

            <h6><img src="img/icons/applications-internet.png" alt="" /> Headline &lt;h6&gt;</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>

            <div class="space"></div>
            <hr />

            <h4 class="small_section">Small section headline</h4>
            <p>Maecenas non tempor nisl. In hac habitasse platea dictumst. Etiam sagittis viverra cursus.</p>

            <div class="space"></div>
            <hr />

            <p class="message_good message">This is a good message.</p>
            <p class="message_bad message">This is a bad message.</p>
            <p class="message_info message">You should know about this message.</p>

            <div class="space"></div>
            <hr />

            <ul>
                <li>Lorem ipsum</li>
                <li>Praesent metu</li>
                <li>Integer congue</li>
                <li>Phasellus</li>
                <li>
                    Mentum interdum
                    <ul>
                        <li>Lorem ipsum</li>
                        <li>Praesent metu</li>
                        <li>Integer congue</li>
                    </ul>
                </li>
            </ul>
        </ui:define>

    </ui:composition>

</html>